<!-- 模块说明 -->
<template>
    <div class="box1" v-if="xainshi">
        <div class="top">
            <p>我的</p>
        </div>
        <div>
            <img src="http://www.shujie.me/themes/classic/assets/images/jiushujie-logo.png" alt="">
        </div>
        <div class="p">
            请先登录后再继续操作哦~
        </div>
        <div class="box2">
            <van-button round color="#ccad74" @click="login">去登陆</van-button>
            <van-button round color="#ccad74" plain @click="logon">注册账号</van-button>
        </div>
    </div>
    <div class="box" v-else>
        <div class="top">
            <p>我的</p>
        </div>
        <div class="center">
            <div style="background: #ccad74;">
                <div class="same1">
                    <div style="display: flex;justify-content: space-between;align-items: center; margin-left: 15px;">
                        <img src="https://img1.baidu.com/it/u=1273075546,211023118&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                            alt="">
                        <span class="s1">username</span>
                    </div>
                    <span class="s2" @click="feiqian">
                        <van-icon name="calendar-o" size="17" />
                        <span style="margin-left: 7px">{{ qian ? '签到' : '已签到' }}</span>
                    </span>
                </div>
            </div>

            <div class="poss same">
                <ul>
                    <li @click="buyCar">
                        <van-icon style="margin-top: 5px" name="shopping-cart-o" size="25" color="#ccad74" />
                        <div style="margin-top: 5px; margin-bottom: 5px; color: #a1a1a1;">购物车</div>
                        <div style="font-weight: bold; margin-bottom: 5px;">0</div>
                    </li>
                    <li @click="purchase">
                        <van-icon style="margin-top: 5px" name="todo-list-o" size="25" color="#ccad74" />
                        <div style="margin-top: 5px; margin-bottom: 5px; color: #a1a1a1;">买的订单</div>
                        <div style="font-weight: bold;  margin-bottom: 5px;">0</div>
                    </li>
                    <li @click="orders">
                        <van-icon style="margin-top: 5px" name="balance-list-o" size="25" color="#ccad74" />
                        <div style="margin-top: 5px; margin-bottom: 5px; color: #a1a1a1;">卖的订单</div>
                        <div style="font-weight: bold;  margin-bottom: 5px;">0</div>
                    </li>
                    <li @click="orderbook">
                        <van-icon style="margin-top: 5px" name="bar-chart-o" size="25" color="#ccad74" />
                        <div style="margin-top: 5px; margin-bottom: 5px; color: #a1a1a1;">售书架</div>
                        <div style="font-weight: bold;  margin-bottom: 5px;">0</div>
                    </li>
                </ul>
            </div>

            <div class="gongN same">
                <ul>
                    <li @click="balance">
                        <div>
                            <van-icon name="gold-coin-o" size="20" />
                            <span style="margin-left: 7px">余额</span>
                        </div>
                        <span class="s1">0.00 <van-icon name="arrow" /></span>
                    </li>
                    <li @click="integral">
                        <div>
                            <van-icon name="points" size="20" />
                            <span style="margin-left: 7px">积分</span>
                        </div>
                        <span class="s1">0 <van-icon name="arrow" /></span>
                    </li>
                    <li @click="fans">
                        <div>
                            <van-icon name="like-o" size="20" />
                            <span style="margin-left: 7px">粉丝</span>
                        </div>
                        <span class="s1">0 <van-icon name="arrow" /></span>
                    </li>
                    <li @click="concern">
                        <div>
                            <van-icon name="plus" size="20" />
                            <span style="margin-left: 7px">关注</span>
                        </div>
                        <span class="s1">0 <van-icon name="arrow" /></span>
                    </li>
                </ul>
            </div>
            <div class="color"></div>
            <div class="gongN same" style="margin-top: 0;">
                <ul>
                    <li @click="set">
                        <div>
                            <van-icon name="setting-o" size="20" />
                            <span style="margin-left: 7px">设置</span>
                        </div>
                        <span class="s1"><van-icon name="arrow" /></span>
                    </li>
                    <li @click="help">
                        <div>
                            <van-icon name="service-o" size="20" />
                            <span style="margin-left: 7px">帮助</span>
                        </div>
                        <span class="s1"><van-icon name="arrow" /></span>
                    </li>
                </ul>
            </div>
            <div class="color" style="height: 113px"></div>
        </div>

    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const qian = ref(true)

// 控制我的页面显示内容 后期改成token
const xainshi = ref(true)

const feiqian = () => {
    qian.value = !qian.value
}

const router = useRouter()
const login = () => {
    router.push('/login')
}
const logon = () => {
    router.push('/logon')
}
const buyCar = () => {
    router.push('/buycar')
}
const purchase = () => {
    router.push('/purchase')
}
const orders = () => {
    router.push('/orders')
}
const orderbook = () => {
    router.push('/orderbook')
}
const balance = () => {
    router.push('/balance')
}
const integral = () => {
    router.push('/integral')
}
const fans = () => {
    router.push('/fans')
}
const concern = () => {
    router.push('/concern')
}
const set = () => {
    router.push('/set')
}
const help = () => {
    router.push('/help')
}

</script>

<style lang="scss" scoped>
// .box {}
.van-nav-bar {
    background: #ccad74;
    color: #fff;
}


.box1 {
    display: flex;
    flex-direction: column;
    text-align: center;

    img {
        width: 95px;
        height: 95px;
        margin-top: 90px;
        margin-bottom: 20px;
    }

    .box2 {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 120px;
        width: 85%;
        // border: 1px solid red;
        margin: 0 auto;
    }

    .p {
        color: #a1a1a1;
        margin-bottom: 30px;
    }
}

.top {
    height: 46px;
    background: #ccad74;

    p {
        font-weight: bold;
        color: #fff;
        line-height: 46px;
        text-align: center;
    }
}

.center {
    // margin-top: 20px;

    .same1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 0 0 50% 50%;

        span {
            color: #fff;
        }

        img {
            // padding: 30px 0;
            padding-top: 20px;
            padding-bottom: 20px;
            width: 90px;
            height: 90px;
            border-radius: 50%;
            vertical-align: middle;
        }

        .s1 {
            padding: 10px;
            font-size: 24px;
        }

        .s2 {
            font-size: 14px;
            background: rgba(0, 0, 0, .3);
            width: 90px;
            text-align: center;
            border-radius: 10px 0 0 10px;
        }
    }

    .poss {
        ul {
            display: flex;
            justify-content: space-around;
            align-items: center;
            text-align: center;
            // border: 1px solid red;
            border-radius: 10px;
            box-shadow: 0px 0px 10px -1px #000;
            background: #fff;
            // position: absolute;
            margin-top: -10px;

            div {
                color: #000;
                // 
            }

        }
    }

    .gongN {
        margin-top: 10px;
        overflow: hidden;

        li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #e1e1e1;

            .s1 {
                color: #a1a1a1;
            }
        }
    }

    .color {
        height: 15px;
        background-color: #f1f1f1;
    }
}
</style>
